<template>
  <div class="grimm-noticebar">
    <!-- info icon -->
    <i v-if="isShowInfoIcon" class="iconfont grimm-noticebar-info-icon" :class="infoIcon"></i>

    <!-- content area -->
    <div class="grimm-noticebar-content-wrap" :style="{...getUserContentStyle}">
      <p
        :class="['grimm-noticebar-content', { 'single-text-overflow-ellipsis': isEllipsis }]"
        ref="content"
      >{{content}}</p>
    </div>

    <!-- close / more icon -->
    <i
      v-if="isShowRightIcon"
      class="iconfont grimm-noticebar-close-icon"
      :class="getRightIcon"
      @click="handleClickMore()"
    />
  </div>
</template>

<script>
const COMPONENT_NAME = 'grimm-noticebar';

export default {
  name: COMPONENT_NAME,
  props: {
    content: {
      type: String,
      default: '',
    },
    isShowInfoIcon: {
      type: Boolean,
      default: true,
    },
    isShowRightIcon: {
      type: Boolean,
      default: true,
    },

    /**
     * Define how content is displayed when it overflows.
     * Available type: scroll | hidden | ellipsis | showMore | autoMoving
     * Generally, when the type is "showMore", the right icon should be '>', not 'x'.
     */
    overflowMode: {
      type: String,
      default: 'scroll',
    },

    // Iconfont name of info icon
    infoIcon: {
      type: String,
      default: 'tips',
    },

    // Iconfont name of right icon
    rightIcon: {
      type: String,
      default: '',
    },

    /**
     * Define how fast the content is moving, when the "overflowMode" is "autoMoving".
     * Available value: a positive integer.
     * The bigger the number, the faster the content moves.
     */
    speed: {
      type: [Number, String],
      default: 5,
    },
    handleClickMore: {
      type: Function,
      default: function() {
        // alert(this.content);
      },
    },
  },
  data() {
    return {
      closeIcon: 'error',
      moreIcon: 'arrow-right',
      originRight: '',
      initLeft: 0,
    };
  },
  computed: {
    isEllipsis() {
      return this.overflowMode === 'ellipsis';
    },
    getUserContentStyle() {
      let style;
      switch (this.overflowMode) {
        case 'ellipsis':
          this.resetContent();
          style = {
            'text-overflow': 'ellipsis',
            overflow: 'hidden',
          };
          break;
        case 'showMore':
          this.resetContent();
          style = {
            overflow: 'hidden',
          };
          break;
        case 'autoMoving':
          this.handleAutoMoving();
          break;
        default:
          style = {
            overflow: this.overflowMode,
          };
          if (this.$refs.content) {
            this.resetContent();
          }
      }
      return style;
    },
    getRightIcon() {
      // Use 'rightIcon' if user difined it.
      if (this.rightIcon) {
        return this.rightIcon;
      }

      // Use 'moreIcon' by default if user doesn't define it, and the 'overflowMode' is 'showMore'.
      if (this.overflowMode === 'showMore') {
        return this.moreIcon;
      }

      // Use 'closeIcon' by default in other situation.
      return this.closeIcon;
    },
  },
  methods: {
    handleAutoMoving() {
      const SPEED = Number(this.speed);
      const originRight = this.$refs.content.getBoundingClientRect().right - 60;
      let currRight;

      this.timer = setInterval(() => {
        currRight = this.$refs.content.getBoundingClientRect().right;
        if (currRight > -SPEED) {
          this.$refs.content.style.left = `${this.initLeft - SPEED}px`;
          this.initLeft -= SPEED;
        } else {
          this.$refs.content.style.left = `${originRight}px`;
          this.initLeft = this.$refs.content.getBoundingClientRect().left;
        }
      }, 100);
    },
    resetContent() {
      clearInterval(this.timer);
      this.$refs.content.style.left = 0;
    },
  },
};
</script>
<style lang="stylus" >
@import '../../common/stylus/variable.styl';
@import '../../common/stylus/base.styl';

$color = #ff5944;
$iconSize = 16px;

.grimm-noticebar {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 12px 0 24px;
  width: 100%;
  height: 44px;
  white-space: nowrap;
  background: rgba(249, 91, 71, 0.1);

  .grimm-noticebar-info-icon {
    padding-right: 8px;
    font-size: $iconSize;
    color: $color;
  }

  .grimm-noticebar-close-icon {
    padding-left: 19px;
    font-size: $iconSize;
    color: $color;
  }

  .grimm-noticebar-content-wrap {
    flex: 1;
    overflow: scroll;

    .grimm-noticebar-content {
      position: relative;
      font-size: $fontsize-regular;
      color: $color;
    }
  }

  // Hide the scrollbar, but it can still scroll
  .grimm-noticebar-content-wrap::-webkit-scrollbar {
    display: none;
  }
}
</style>